<script setup lang="ts">
import { ref } from 'vue'

const arr = ref(['苹果', '西瓜', '樱桃', '车厘子'])
const person = ref({ name: '张三', age: 18, gender: '男' })
</script>

<template>
  <div class="app-page">
    <ul>
      <!-- 数组遍历 -->
      <!--  (item, index) in arr  -->
      <li v-for="(item, index) in arr" :key="index">序号：{{ index }}---{{ item }}</li>
    </ul>
    <!-- 或者 -->
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>

    <!-- 对象遍历 -->
    <!-- 
      value:对象中的值
      key:对象中的键
      index:遍历索引从0开始
     -->
    <ul>
      <li v-for="(value, key, index) in person" :key="index">
        键:{{ key }},值:{{ value }},索引:{{ index }}
      </li>
    </ul>

    <!-- 数字遍历 -->
    <div v-for="item in 20" :key="item">{{ item }}</div>
  </div>
</template>

<style lang="css" scoped></style>
